<script setup>

import {entities_store, transactions_store} from "@/global_store";
import {More, Moon, Sunny} from '@element-plus/icons-vue';

function aside_button_clicked() {
    transactions_store.aside_drawer = !transactions_store.aside_drawer;
    if (transactions_store.window_width >= 600) {
        if (transactions_store.file_list.width > 0) {
            transactions_store.file_list.width = 0;
        } else {
            transactions_store.file_list.width = 300;
        }
    }
}

</script>

<template>
    <ul>
        <li>
            <el-button @click="entities_store.left_up_menu_collapsed = !entities_store.left_up_menu_collapsed">
                <el-icon><More /></el-icon>
            </el-button>
        </li>
        <li class="entry">
            <img alt="Vue logo" width="20" src="@/assets/logo.png">
            <span>首页</span>
        </li>
        <li class="entry">作业</li>
        <li class="control">
            <el-switch v-model="entities_store.sounds.can_play_audio" size="large">
                <template #active-action>
                  <i class="iconfont icon-soundsize"></i>
                </template>
                <template #inactive-action>
                  <i class="iconfont icon-mute"></i>
                </template>
            </el-switch>
            <el-switch v-model="entities_store.dark_mode"
                       :active-action-icon="Moon"
                       :inactive-action-icon="Sunny"
                       size="large"
                       style="font-size: x-large"
           />
        </li>
    </ul>
</template>

<style scoped>
    ul {
        height: 100%;
        display: flex;
        flex-direction: row;
        margin: 0;
    }
    li {
        list-style: none;
        text-align: center;
        display: flex;
        align-items: center;
        margin: 0 0.2em;
        padding: 0 0.5em;
        &.entry {
            cursor: pointer;
            transition: background-color 100ms;

            &:hover, &:focus {
                background-color: #88888888;
            }
        }
        img {
            margin-right: 0.5em;
        }
        &.control {
            margin-left: auto;
            .el-switch {
                margin: 0 0.2em;
            }
        }
    }

    .iconfont {
        font-size: 30px;
    }
</style>